<template>
  <div class="wrapper">
    <div class="top">
      <div class="title">申领ok卡</div>
      <p>申请人微信昵称: {{ userInfo.memberName }}</p>
      <p>申请人手机号码: {{ userInfo.phone }}</p>
    </div>

    <main>
      <div class="content" v-for="item of activityContent">
        <div class="shop-name">
          {{ item.storeName }}
        </div>
        <div class="title">
          <span class="title-left">
            单号/流水号
          </span>
          <span v-for="itemz of titleList" class="title-right">
            {{ itemz }}
          </span>
        </div>
        <div class="content-item" v-for="itemX of item.receiveList">
          <span>{{ itemX.outTradeNo }}</span>
          <div class="item-right">
            <span>{{ itemX.payAmount }}</span>
            <span>{{ itemX.type }}</span>
            <span>{{ itemX.receiveAmount }}</span>
            <span>{{ itemX.status | format }}</span>
            <span
              class="no-apply"
              @click="apply(itemX.outTradeNo)"
              v-if="itemX.status === 0"
            >
              申领
            </span>
            <span class="apply" v-else>申领</span>
          </div>
        </div>
      </div>
    </main>

    <div class="bottom">
      <image :src="'https://mini.jiaw.com/img/8861020220224.jpg'"></image>
      <p @click="scan">线下订单请扫描小票</p>
    </div>
    <u-modal
      v-model="show"
      title="小票扫描识别"
      show-cancel-button
      :content-style="{
        textAlign: 'center'
      }"
      @confirm="confirm"
    >
      <view class="slot-content">
        <p>店铺名称: {{ storeInfo.storeName }}</p>
        <p>POS机: {{ posResult['POS机号'] }}</p>
        <p>流水号: {{ posResult['流水号'] }}</p>
        <p>金额: {{ posResult['交易金额'] }}</p>
        <p>铺位号: {{ storeInfo.storePosition }}</p>
      </view>
    </u-modal>
  </div>
</template>

<script>
import {
  receiveCard,
  applyCard,
  queryStore,
  receiveQualificationOffline
} from '@/api'
import mixins from '@/mixins'
import getInfo from '@/utils/aes-decryption'

export default {
  mixins: [mixins],
  data() {
    return {
      titleList: ['金额', '类型', 'ok卡', '状态', '操作'],
      show: false,
      activityContent: [],
      posResult: {},
      storeInfo: {}
    }
  },
  mounted() {
    receiveCard(this.userInfo.id).then(res => {
      this.activityContent = res.data
    })
  },
  methods: {
    confirm() {
      const { POS机号, 流水号, 交易金额, 合同号, 交易时间 } = this.posResult
      receiveQualificationOffline(
        this.userInfo.id,
        POS机号,
        流水号,
        交易金额,
        合同号,
        交易时间
      ).then(res => {
        uni.showToast({
          title: res.resMsg,
          icon: 'none'
        })
      })
      receiveCard(this.userInfo.id).then(res => {
        this.activityContent = res.data
      })
      this.show = false
    },
    scan() {
      wx.scanCode({
        success: res => {
          let index = res.result.indexOf('?') + 4
          this.posResult = getInfo(res.result.slice(index))
          queryStore(this.posResult['合同号']).then(res => {
            this.storeInfo = res.data
            this.show = true
          })
          receiveCard(this.userInfo.id).then(res => {
            this.activityContent = res.data
          })
        }
      })
    },
    apply(outTradeNo) {
      applyCard(outTradeNo).then(() => {
        receiveCard(this.userInfo.id).then(res => {
          uni.showToast({
            title: res.resMsg,
            icon: 'none'
          })
          this.activityContent = res.data
        })
      })
    }
  },
  filters: {
    format(status) {
      if (status === 0) return '未申领'
      if (status === 1) return '已申领'
      if (status === 2) return '已发放'
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  background: #f7f8f8;
  padding-bottom: 150px;
}
.top {
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    color: #b3292b;
    font-size: 23px;
  }
  p {
    margin-top: 16px;
    border: 1px solid rgb(174, 172, 172);
    padding: 10px 20%;
    border-radius: 30px;
  }
}

main {
  width: 96%;
  margin-left: 2%;
  background: #fff;
  padding: 10px;
  margin-top: 30px;
}
.content {
  margin: 20px 0;
  .shop-name {
    font-size: 20px;
    font-weight: 900;
  }
  .title {
    display: flex;
    font-size: 11px;
    .title-left {
      width: 120px;
    }
    .title-right {
      flex: 1;
      text-align: center;
    }
  }
  .content-item {
    display: flex;
    border-bottom: 1px solid #eee;
    margin: 10px 0;
    padding: 3px 0;
    span {
      font-size: 10px;
      &:nth-child(1) {
        width: 130px;
      }
    }
    .item-right {
      display: flex;
      span {
        flex: 1;
        font-size: 11px;
        text-align: center;
      }

      .no-apply {
        background: #c4191c;
        border-radius: 10px;
        color: #fff;
      }
      .apply {
        background: rgb(182, 180, 180);
        color: #fff;
        border-radius: 10px;
      }
    }
  }
}

.bottom {
  padding: 60px 0;
  position: fixed;
  bottom: 30px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  image {
    width: 50px;
    height: 50px;
  }
  p {
    background: #f0b354;
    color: #fff;
    margin-top: 10px;
    border-radius: 20px;
    padding: 6px 20px;
  }
}
.slot-content {
  p {
    margin: 5px 0;
  }
}
</style>
